<template>
	<view>
		<!-- #ifdef H5 -->
		<fui-sticky>
			<fui-nav-bar title="轮播管理" @leftClick="leftClick">
				<fui-icon name="arrowleft"></fui-icon>
			</fui-nav-bar>
		</fui-sticky>
		<!-- #endif -->
		
		<fui-tabs center :tabs="tabs" :current="current" @change="change"></fui-tabs>
		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
			<fui-card v-for="item in swiperList" :key="item._id" style="margin-top: 20rpx;" imageRadius="50%" :title="category(item.category_id)" color="#fd5531" :tag="'过期时间：'+formatDateDay(item.expire_time)"
				:headerLine="false" showBorder>
				<view style="display: flex;justify-content: space-between;">
					<view class="edit_">
						{{getType(item.release_status)}}
					</view>
					<view @click="removeSwiper(item._id)" class="edit_del" v-if="item.release_status==4||item.release_status==3">
						删除
					</view>
				</view>
				
				<view class="fui-list__item">
					<image class="fui-cover" style="height: 360rpx;width: 100%;"
						:src="item.bannerfile" mode="scaleToFill">
					</image>
					<view class="fui-list__title">{{item?.title}}</view>
				</view>
			</fui-card>
		</mescroll-body>
		<fui-dialog maskBackground="rgba(0,0,0,.1)" :show="showDialog" content="是否删除该轮播" maskClosable @click="onClick" @close="onClose"></fui-dialog>
		<fui-fab :zIndex="999" @click="fabClick">
			<fui-icon name="plus" color="#fff"></fui-icon>
		</fui-fab>
	</view>
</template>

<script setup>
	const apiGetBanner = uniCloud.importObject('qc-article',{
		customUI: true // 取消自动展示的交互提示界面
	})
	import {formatDateDay} from '@/utils/index.js'
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	import { LoginStore } from "@/store/modules/login.js";
    import { ref, reactive,computed } from 'vue'
	const userInfo = computed(() => (LoginStore().userInfo))
	import { onLoad, onPageScroll, onReachBottom } from "@dcloudio/uni-app";
	// #ifdef H5
	const leftClick = ()=>{
		uni.navigateBack()
	}
	// #endif
	const params = ref(null)
	onLoad((e)=>{
		params.value = JSON.parse(e.item)
		uni.$on("resetUpScroll",()=>{
			getMescroll().resetUpScroll()
		})
	})
	let current = ref(0)
	let tabs = ["全部",'显示轮播', '审核中', '审核失败', '过期轮播']
	const swiperList = ref([])
	//分类
	const getType = (e) => {
		switch (e) {
			case 1:
				return '显示中'
				break;
			case 2:
				return '审核中'
				break;
			case 3:
				return '审核失败'
				break
			case 4:
				return '已过期'
				break
		}
	}
	// 分页
	const {
		mescrollInit,
		downCallback,
		getMescroll
	} = useMescroll(onPageScroll, onReachBottom)
	const upCallback = async (mescroll) => {
		try {
			let params = {
				pageNum: mescroll.num,
				pageSize: mescroll.size,
				user_id: userInfo?.value?._id,
				publish_type:'3',
				release_status: current.value
			}
			const res = await apiGetBanner.getUserAd(params)
			const curPageData = res.data || [] // 当前页数据
			if (mescroll.num == 1) swiperList.value = []; // 第一页需手动制空列表
			swiperList.value = swiperList.value.concat(curPageData); //追加新数据
			//方法一(推荐): 后台接口有返回列表的总页数 totalPage
			mescroll.endBySize(curPageData.length, res.total); //必传参数(当前页的数据个数, 总页数)
		} catch (e) {
			mescroll.endErr(); // 请求失败, 结束加载
		}
	}
	const showDialog = ref(false)
	const swiperId = ref()
	//删除轮播
	const removeSwiper =(id)=>{
		swiperId.value = id
		showDialog.value = true
	}
	const onClick = async(e)=>{
		if(e.index==0){
			showDialog.value = false
		}else{
			const res = await apiGetBanner.deleteBanner({_id:swiperId.value})
			if(res.errCode==0){
				showDialog.value = false
			}
			getMescroll().resetUpScroll()
		}
	}
	const category = (e)=>{
		if(e==0) return '首页轮播图'
		if(e==1) return '应用轮播图'
		if(e==2) return '发布页轮播图'
	}
	const change = (e) => {
		current.value = e.index
		//切换从新调接口
		getMescroll().resetUpScroll()
	}
	const fabClick = () => {
		const param = {
			_id:params.value.category_id,
			name:params.value.name,
			publish_type:params.value.publish_type
		}
		console.log(param);
		uni.fui.href(`/pages/push/uploadSwiper/uploadSwiper?title=${JSON.stringify(param)}`)
	}
</script>

<style lang="scss" scoped>
	.card_box {
		padding-bottom: 100rpx;
	}

	.zdsx {
		margin-left: 20rpx;
		padding: 5rpx 15rpx;
		border-radius: 8rpx;
		color: #fff;
		background-color: var(--fui-color-primary);
	}
	.edit_ {
		padding: 5rpx 30rpx;
		color: var(--fui-color-primary);
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		background-color: #ebf1ff;
	}
	
	.edit_del{
		text-align: center;
		width: 100rpx;
		padding: 5rpx 30rpx;
		color: #fff;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		background-color: var(--fui-color-danger);
	}
	
	.zd {
		color: #fff;
		padding: 5rpx 15rpx;
		border-radius: 8rpx;
		background-color: var(--fui-color-danger);
	}

	.active {
		border: 1px solid #ccc;
	}

	.tap {
		font-size: 26rpx;
		display: flex;
	}

	.fui-col_bottom {
		display: flex;
		justify-content: right;
		font-size: 22rpx;
		margin-top: 5rpx;
	}

	.tap_item {
		margin-right: 10rpx;
	}

	.sort {
		margin-top: 5rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.browse {
		color: var(--fui-color-label);
		font-size: 22rpx;
	}

	.sort_item {
		width: 100rpx;
		background-color: #e6f3fe;
		color: #5babf2;
		font-size: 24rpx;
		padding: 2rpx 10rpx;
	}

	.card {
		padding: 22rpx;
		background-color: var(--fui-bg-color);
		border-radius: 16rpx;
		margin-top: 12rpx;
	}

	.icon {
		display: inline-block;
		vertical-align: middle;
		padding-right: 5px;
		padding-bottom: 5rpx;
	}

	.fui-col_text-a {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.first {
		z-index: -1 !important;
		padding: 10rpx;
		border-radius: 16rpx;
		height: 135rpx;
		background: linear-gradient(to right top, #ff6f49, #ff5a5e);;
	}

	.fui-col_text {
		font-size: 26rpx;
		font-weight: bold;
	}

	.first-bottom {
		width: 94%;
		color: #d8d8d8;
		margin: 10rpx auto;
		display: flex;
		font-size: 24rpx;
		justify-content: space-between;
	}

	.first-title {
		display: flex;
	}

	.first-content {
		margin-left: 22rpx;
		color: #fff;
	}

	.first-text {
		margin-left: 5rpx;
		color: #fff;
		font-weight: bold;
	}

	.margintop {
		margin-top: 32rpx;
	}

	.index-box {
		background-color: var(--fui-bg-color-grey);
		padding: 32rpx
	}

	.swiper {
		height: 370rpx;
		border-radius: 16rpx;
	}

	.swiper-item {
		height: 100%;
		background-color: var(--fui-color-primary);
		border-radius: 20rpx;
	}

	.grid {
		border-radius: 16rpx;
		background-color: var(--fui-bg-color);
		margin-top: 32rpx;
		padding: 32rpx 0 32rpx 0;

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.fui-grid__cell {
		margin: auto;
		text-align: center;
	}

	.fui-text {
		margin-left: 10rpx;
	}

	.fui-list__item {
		display: flex;
		padding: 32rpx;
	}

	.upswiper {
		padding: 32rpx;
		background-color: #fff;
	}

	.fui-cover {
		width: 100%;
		height: 365rpx;
		display: block;
	}

	.fui-list__title {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		color: #fff;
		font-weight: 500;
		padding: 24rpx 20rpx;
		box-sizing: border-box;
		background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
	}
</style>